<template>
  <div class="boxShadow" v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading">
    <div style="margin:20px" v-if="gsms">
      <el-card style="padding-left: 5%; padding-right: 5%">
        <!-- 标题 -->
        <div class="bold box fontSize" v-if="gsms.GSMC">
          <span>{{ gsms.GSMC }}</span>
          <span>({{ gsms.GSBM }})</span>
        </div>
        <!-- 定义 -->
        <div class="box fontSize" v-if='gsms.DY'>
          <span class="bold">定义：</span>
          <span>{{gsms.DY}}</span>
        </div>
          <el-table
            v-for="item in tableData"
            :key="item.BT"
            :data="item.TableD"
            ref="multipleTable"
            tooltip-effect="dark"
            style="width: 100%"
            class="fontSize"
            border
            :header-cell-style="{ background: '#34adfc', color: '#fff' }"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="45px" ></el-table-column>
            <template v-for='(col,index) in item.Tab'>
              <el-table-column
                :show-overflow-tooltip="true"
                :prop="col.dataItem"
                :label="col.dataName"
                :key="index"
                border>
              </el-table-column>
            </template>
          </el-table>
          <p class="totalscore fontSize">总分：{{fraction}}分</p>
          <!-- 说明 -->
          <div class="box fontSize" v-if="gsms.SM">
            <span class="bold">说明：</span>
            <span style="white-space: pre-line">{{ gsms.SM }}</span>
          </div>
          <!-- 意义 -->
          <div class="box fontSize" v-if="gsms.YY">
            <span class="bold">意义：</span>
            <span style="white-space: pre-line">{{ gsms.YY }}</span>
          </div>
          <!-- 参考文献 -->
          <div class="box fontSize" v-if="gsms.CKWX">
            <span class="bold">参考文献：</span>
            <span class="ckwx" style="white-space: pre-line">{{gsms.CKWX}}</span>
          </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import {getFormulaDetailsAPI} from '@/api/index.js'
export default {
  data(){
    return {
      // 总分
      fraction:'0',
      loading: true,
      multipleSelection: [],
      tableData: [],
      gsms:{}
    }
  },
  mounted(){
    this.tableDetails(this.$route.params.gsbm)
  },
  methods:{
    handleSelectionChange(val) {
      this.multipleSelection = val;
      const num= []
      for(var i=0;i<this.multipleSelection.length;i++){
        num.push(this.multipleSelection[i].COLM2)
      }
      let sum = 0
      num.forEach(item => {
        sum = Number(sum)+Number(item)
      })
      this.fraction = sum
    },
    // 获取公式详情接口
    async tableDetails (gsbm){
      try {
        const res = await getFormulaDetailsAPI({
          token: "2855ed6102590a02fd52ce00567ee9d4",
          gsbm: gsbm,
          })
        res.data.result.forEach(item => {
          this.tableData = item.GSMSXX
          this.gsms = item.GSMS
        })
        this.loading = false
      } catch(err) {
        this.loading = false
        console.log(err);
      }
    }
  }
}
</script>
<style scoped>
.gssm{
  margin-left: 10px;
  font-size:20px;
}
.totalscore{
  margin: 0;
  border: 1px solid #EBEEF5;
  border-top:none;
  padding: 10px 10px 10px 20px;
  /* background: #f7f7f7; */
}
</style>
